<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 500px;
            height: 200px;
            border: 4px dotted blueviolet;
        }
    </style>
</head>

<body>
    <button id="btn">获取彩票信息</button>
    <div id="box"></div>
    <script>
        // 1.添加点击事件
        document.getElementById('btn').onclick = function () {
            //2.生成 7位的随机数
            var suijiArr = getRandom(7, 1, 49);
            console.log(suijiArr);
            //3.将随机数显示在页面上
            document.getElementById('box').innerHTML = suijiArr;
            // 4.随机数需要保存到 hash记录中
            window.location.hash = suijiArr;

        }
        //当历史记录发生变化时触发的事件
        window.onhashchange = function () {
            console.log("事件触发了");
            // 6.获取历史记录中的数据

            var suijiStr = window.location.hash.substring(1);
            console.log(suijiStr);
            // 7.当历史记录变化时，将历史中的数组信息再次显示在页面上
            document.getElementById('box').innerHTML = suijiStr;
        }
        function getRandom(num, min, max) {
            var numArr = [];//放随机数
            for (var i = 0; i < num; i++) {
                var nn = Math.floor(Math.random() * (max - min) + min);
                numArr.push(nn);
            }
            return numArr;
        }
    </script>
</body>

</html>